<template>
	<w-collapse v-model="DetailsInfocollapseVisible" contentHeight="180px" disabled :showArrow="false" title="工艺路由">
		<routeInfo
			ref="routeInfo"
			:disabled="disabled"
			:routesTable="routesTable"
			:routeDetails="routeDetails"
			:otherChanged="otherChanged"
			@add-route="addRoute"
			@reduceProcess="reduceProcess"
			@clickProcess="clickProcess"
		></routeInfo>
	</w-collapse>
</template>
<script>
import routeInfo from './RouteInfo.vue'
export default {
	name: 'DetailsInfo',
	components: {
		routeInfo
	},
	props: {
		visibleFlag: Boolean,
		disabled: Boolean,
		routesTable: {
			type: Array,
			default: () => {
				return []
			}
		},
		routeDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		otherChanged: {
			type: Array,
			default: () => {
				return {}
			}
		}
	},
	data () {
		return {
			DetailsInfocollapseVisible: true,
			// routesTable: [],
			newBox: {
				connectionType: 1,
				expendableUrls: [],
				fileUrls: [],
				id: 'temp',
				lineId: '',
				name: '',
				parentId: '',
				procedureId: '',
				productionUrls: [],
				routingSopDTO: {
					id: '',
					packingRequirement: '',
					performanceStandard: '',
					processingRequirement: '',
					qualityRequirements: '',
					remark: ''
				},
				seq: '1',
				stationEntitys: [],
				subId: '',
				timeUnit: 1,
				workTimeCount: ''
			},
			boxTable: []
		}
	},
	methods: {
		addRoute (currentRoute) {
			this.$emit('addRoute', currentRoute)
		},
		reduceProcess (currentRoute) {
			this.$emit('reduceProcess', currentRoute)
		},
		selectProcess (id) {
			this.$refs.routeInfo.selectedid = id
		},
		clickProcess (currentRoute, flag) {
			this.$emit('clickProcess', currentRoute, flag)
		},
		reduceOneProcess (box) {
			if (box.parentId) {
				this.getOneBox(box.parentId).subId = box.subId
				if (!this.hadChanged(box.parentId)) {
					this.otherChanged.push(this.getOneBox(box.parentId))
				}
			}
			if (box.subId) {
				this.getOneBox(box.subId).parentId = box.parentId
				this.getOneBox(box.subId).seq = box.seq
				if (!this.hadChanged(box.subId)) {
					this.otherChanged.push(this.getOneBox(box.subId))
				}
			}
			for (let i = 0; i < this.routesTable.length; i++) {
				if (this.routesTable[i].seq > (box.seq + 1)) {
					this.routesTable[i].seq = this.routesTable[i].seq * 1 - 1
					if (!this.hadChanged(this.routesTable[i].id)) {
						this.otherChanged.push(this.routesTable[i])
					}
				}
			}
			this.routesTable.splice((box.seq - 1), 1)
			this.drawBoxPath()
			// this.clickProcess(this.willSelect(box))
		},
		willSelect (box) {
			if (box.subId === null) {
				box.subId = ''
			}
			if (box.subId === '') {
				if (box.parentId !== '') {
					return box.parentId
				}
			} else {
				return box.subId
			}
		},
		addOneProcess (box) {
			if (box.id === 'temp') {
				return
			}
			var _newbox = JSON.parse(JSON.stringify(this.newBox))
			if (!box.subId) {
				box.subId = ''
			}
			if (box.subId !== '') {
				if (box.subId !== 'temp') {
					_newbox.subId = box.subId
				}
				_newbox.parentId = box.id
				_newbox.level = (box.level ? box.level : 0) + 1
				_newbox.seq = (box.seq ? box.seq : 0) * 1 + 1
				_newbox.lineId = this.routeDetails.id
				if (_newbox.parentId) {
					this.getOneBox(_newbox.parentId).subId = 'temp'
					// 放入待提交内容
					if (!this.hadChanged(_newbox.parentId)) {
						this.otherChanged.push(this.getOneBox(_newbox.parentId))
					}
				}
				if (_newbox.subId) {
					this.getOneBox(_newbox.subId).parentId = 'temp'
					// 放入待提交内容
					if (!this.hadChanged(_newbox.subId)) {
						this.otherChanged.push(this.getOneBox(_newbox.subId))
					}
				}
				for (let i = 1; i < this.routesTable.length; i++) {
					if (i >= box.seq) {
						this.routesTable[i].seq = this.routesTable[i].seq * 1 + 1
						// 放入待提交内容
						if (!this.hadChanged(this.routesTable[i].id)) {
							this.otherChanged.push(this.routesTable[i])
						}
					}
				}
				this.routesTable.splice(box.seq, 0, _newbox)
				this.drawOneLine()
				// this.routesTable.push(_newbox)
				this.clickProcess(_newbox)
			} else {
				if (box.subId !== 'temp') {
					_newbox.subId = box.subId
				}
				_newbox.parentId = box.id
				_newbox.seq = box.seq * 1 + 1
				_newbox.lineId = this.routeDetails.id
				if (_newbox.parentId) {
					this.getOneBox(_newbox.parentId).subId = 'temp'
					// 放入待提交内容
					if (!this.hadChanged(_newbox.parentId)) {
						this.otherChanged.push(this.getOneBox(_newbox.parentId))
					}
				}
				for (let i = 1; i < this.routesTable.length; i++) {
					if (i >= box.seq) {
						this.routesTable[i].seq = this.routesTable[i].seq * 1 + 1
						if (!this.hadChanged(_newbox.parentId)) {
							this.otherChanged.push(this.routesTable[i])
						}
					}
				}
				this.routesTable.splice(box.seq, 0, _newbox)
				this.drawOneLine()
				// this.routesTable.push(_newbox)
				this.clickProcess(_newbox)
			}
			// make save Data
			// this.savebox()
			this.drawBoxPath()
		},
		linePath (line) {
			this.$refs.routeInfo.oneD += line.path1 + line.path2
			this.$refs.routeInfo.oneDSin += line.path3
		},
		getOneBox (id) {
			let box
			this.routesTable.forEach((v) => {
				if (id === v.id) {
					box = v
				}
			})
			return box
		},
		clearoneD () {
			this.$refs.routeInfo.oneD = ' '
			this.$refs.routeInfo.oneDSin = ' '
		},
		// 绘制所有链路
		drawBoxPath () {
			this.refreshPath()
			this.clearoneD()
			this.drawOneLine()
		},
		// 绘制一条链路
		drawOneLine () {
			// line.path1 + line.path2 + line.path3 + line.path4 + line.path5 + line.path6
			var _boxTable = this.routesTable
			for (var i = 0; i < _boxTable.length; i++) {
				this.drawBoxAndLine(_boxTable[i])
			}
		},
		// 绘制节点box和parentbox之间的线
		drawBoxAndLine (box) {
			var p = { y: 30, width: 180, height: 100 }
			p.x = p.width * (box.seq - 1) + 32 + (62 * (box.seq - 1))
			let t = 'M' + (p.x + p.width + this.$refs.routeInfo.lineWidth - 6) + ',' + (p.y + (p.height / 2) - 4)
			t = t + ' L' + (p.x + p.width + this.$refs.routeInfo.lineWidth) + ',' + (p.y + (p.height / 2))
			t = t + ' L' + (p.x + p.width + this.$refs.routeInfo.lineWidth - 6) + ',' + (p.y + (p.height / 2) + 4)
			t = t + ' L' + (p.x + p.width + this.$refs.routeInfo.lineWidth - 6) + ',' + (p.y + (p.height / 2) - 4) + ' '
			var line = {
				path1: 'M' + (p.x + p.width) + ' ' + (p.y + (p.height / 2)) + ' ',
				path2: 'L' + (p.x + p.width + this.$refs.routeInfo.lineWidth - 8) + ' ' + (p.y + (p.height / 2)) + ' ',
				path3: t
			}
			if (!box.subId) {
				box.subId = ''
			}
			if (box.subId === null) {
				box.subId = ''
			}
			// 画Box的连接线
			if (box.subId !== '') {
				this.linePath(line)
			}
		},
		// 获得某个节点的子节点
		getsubId (id, parentseq) {
			// seq 是这个链路中第几box
			this.routesTable.forEach((v) => {
				if (id === v.parentId) {
					if (v.seq !== parentseq + 1) {
						v.seq = (v.seq * 1) + 1
						// 放入待提交内容
						if (!this.hadChanged(v.id)) {
							this.otherChanged.push(v)
						}
					}
					this.getsubId(v.id, parentseq + 1)
					this.boxTable.push(v)
				}
			})
		},
		// 获得所有根节点为起点的链路
		getRootNode () {
			const _routesTable = this.routesTable
			var _newbox = JSON.parse(JSON.stringify(this.newBox))
			if (this.routesTable.length < 1) {
				this.routesTable.push(_newbox)
				this.$refs.routeInfo.selectedid = 'temp'
			}
			_routesTable.forEach((v) => {
				if (v.parentId && v.parentId === '') {
					this.getsubId(v.id, 1)
					if (v.seq !== 1) {
						v.seq = 1
						// 放入待提交内容
						if (!this.hadChanged(v.id)) {
							this.otherChanged.push(v)
						}
					}
					this.boxTable.push(v)
				}
			})
		},
		// 获得某个节点
		getOneNode (id) {
			// seq 是这个链路中第几box
			return this.routesTable.filter(v => {
				if (id === v.id) {
					return v
				}
			})
		},
		hadChanged (id) {
			var isinarr = false
			for (let i = this.otherChanged.length; i > 0; i--) {
				if ((this.otherChanged[i - 1] || '').id === id) {
					this.otherChanged.splice(i - 1, 1)
					// isinarr = true
				}
			}
			return 	isinarr
		},
		refreshPath () {
			this.getRootNode()
		}
	},
	watch: {
		otherChanged: {
			immediate: true,
			handler (data) {
				console.log(data)
			},
			deep: true
		}
	}
}
</script>
